import React, { Component } from 'react';
import {
	View, StyleSheet, DeviceEventEmitter, TextInput, ScrollView, Alert
} from 'react-native';
import ValidateDataUtil from '../../../utils/ValidateDataUtil';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { InputRow, LargeBtn } from '../../requirement-plan/component/Component.js';

const scale = GLOBAL.SCALE;
let bankVoBack = {};

export class BankAddPage extends Component {

	static navigationOptions = ({ navigation }) => {
		const params = navigation.state.params || {};
		const { companyAcct } = params;
		bankVoBack = companyAcct;

		return {
			headerTitle: '银行信息',
			headerLeft: <Common type="headLeft" onPress={() => {
				navigation.state.params.setParamsVo(navigation);
			}} />,
			headerTintColor: style.color.dark,
			headerStyle: style.headTow.headerStyleWidthBorder,
			headerTitleStyle: style.headTow.headerTitleStyle,
		};
	};

	constructor(props) {
		super(props);
		this.state = {
			modalAreaVisible: false,
		}
		this._didPressLargeBtn = this._didPressLargeBtn.bind(this);
		this.goBack = this.props.navigation.state.params.goBack;
		this.sendData = this.props.navigation.state.params.companyAcct;

		if (bankVoBack.openBankName && bankVoBack.openAcctNo) {
			this.bankVoBack = {};
			this.bankVoBack.openBankName = bankVoBack.openBankName;
			this.bankVoBack.openAcctNo = bankVoBack.openAcctNo;
			this.bankVoBack.checked = bankVoBack.checked;
			this.bankVoBack.index = bankVoBack.index;
			if (bankVoBack.companyId) {
				this.bankVoBack.companyId = bankVoBack.companyId;
			}
			if (bankVoBack.isDefault) {
				this.bankVoBack.isDefault = bankVoBack.isDefault;
			}
		} else {
			this.bankVoBack = null;
		}

	}

	componentWillMount () {
		this.props.navigation.setParams({
			setParamsVo: this.setParamsVo,
		})
	}

	componentWillUnmount () {
		const { openBankName, openAcctNo } = this.sendData;
		const sendData = this.props.navigation.state.params.bankVoBack ? this.bankVoBack : this.sendData;
		if (openBankName && openAcctNo) {
			DeviceEventEmitter.emit('bankParam', { bankList: sendData ? [sendData] : null });
		}
	}

	setParamsVo (navigation) {
		navigation.state.params.bankVoBack = true;
		const { navigate } = navigation;
		navigate(navigation.state.params.goBack);
	}

	render () {
		const { openBankName, openAcctNo } = this.sendData;//edit
		return (
			<View style={[styles.container,]}>

				<ScrollView style={styles.scrollView} keyboardShouldPersistTaps={'handled'} keyboardDismissMode={'on-drag'}>
					<View style={styles.wrap}>
						<View style={{ width: 345 * scale }}>
							<InputRow text={'开户账号'}>
								<View style={styles.inputRowRight}>
									<TextInput
										ref="openAcctNo"
										style={styles.textInput}
										underlineColorAndroid='transparent'
										returnKeyType='done'
										placeholder={"请输入"}
										placeholderTextColor="#999"
										keyboardType='numeric'
										maxLength={30}
										editable={true}
										defaultValue={openAcctNo}
										onChangeText={(openAcctNo) => {
											this.sendData.openAcctNo = openAcctNo;
										}}
									/>
								</View>
							</InputRow>
							<InputRow text={'开户银行'}>
								<View style={styles.inputRowRight}>
									<TextInput
										ref="openBankName"
										style={styles.textInput}
										underlineColorAndroid='transparent'
										returnKeyType='done'
										keyboardType='default'
										placeholder={"请输入"}
										placeholderTextColor="#999"
										maxLength={30}
										editable={true}
										defaultValue={openBankName}
										onChangeText={(openBankName) => {
											this.sendData.openBankName = openBankName;
										}}
									/>
								</View>
							</InputRow>
						</View>
					</View>
				</ScrollView >
				<LargeBtn onPress={this._didPressLargeBtn} text={'保存并使用'} />
			</View>

		)
	}

	/**
 * 点击底部按钮
 */
	async _didPressLargeBtn () {
		const { openBankName, openAcctNo } = this.sendData;
		if (ValidateDataUtil.isEmpty(openBankName)) {
			this.refs.openBankName.focus();
			Alert.alert('请填写开户银行');
			return;
		}
		if (ValidateDataUtil.isEmpty(openAcctNo)) {
			this.refs.openAcctNo.focus();
			Alert.alert('请填写开户账号');
			return;
		}
		if (!this.sendData.isDefault) {
			this.sendData.isDefault = 2;  //如果isDefault是undefined，说明是新增银行，那将isDefault设置为2 不是默认状态
		}
		const { navigate } = this.props.navigation;
		this.sendData.checked = true;
		navigate(this.goBack, {
			bankList: [this.sendData]
		});

	}
}

const styles = StyleSheet.create({
	text: {
		fontSize: 14 * scale,
		color: '#4B4B4B'
	},
	textInput: {
		borderWidth: 0,
		fontSize: 13 * scale,
		color: '#404040',
		width: '100%',
		height: 42 * scale,
		padding: 0,
		alignSelf: 'center',
	},
	scrollView: {
		flex: 1,
	},
	container: {
		flex: 1,
		backgroundColor: '#F5F5F5',
	},
	wrap: {
		backgroundColor: '#fff',
		alignItems: 'center',
	},
	inputRowRight: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		flexWrap: 'wrap',
	},
})